<template>
	<div class="recipe_container">
		<!-- {{ recipe }} -->
		<div class="recipe_title">
			<h1>{{ recipe.name }}</h1>
			<div class="time">运行时间：{{ recipe.time }}s</div>
		</div>
		<el-divider class="divider"></el-divider>
		<div class="recipe_main">
			<div v-for="item in recipe.ingredients" :key="item.id" @click="gotoItem(item.id)">
				<div class="flex-center">
					<my-image type="items" :icon="item.iconUrl" :size="64" />
					<p class="recipe_text">&nbsp;x {{ item.amount}}</p>
				</div>
				<div class="bottom_text">{{ Math.floor(item.amount / recipe.time * 60 * 1000) / 1000 }} item/min</div>
			</div>
			<p v-show="recipe.ingredients.length != 0 && recipe.products.length != 0" class="recipe_text">=></p>
			<div v-for="item in recipe.products" :key="item.id" @click="gotoItem(item.id)">
				<div class="flex-center">
					<my-image type="items" :icon="item.iconUrl" :size="64" />
					<p class="recipe_text">&nbsp;x {{ item.amount}}</p>
				</div>
				<div class="bottom_text">{{ Math.floor(item.amount / recipe.time * 60 * 1000) / 1000 }} item/min</div>
			</div>
			<div class="buildings">
				<div v-for="build in recipe.buildings" :key="build.id" @click="gotoBuild(build.id)">
					<my-image type="buildings" :icon="build.iconUrl" :size="64" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import MyImage from "@/components/Image.vue";
	export default {
		name: "simpleRecipeInfo",
		props: ["recipe"],
		components: {
			MyImage,
		},
		methods: {
			Item(url) {
				return this.$img.i_64(url);
			},
			gotoItem(id) {
				if (this.$route.name == "BuildInfo" || this.$route.query.id != id) {
					this.$router.push({
						path: "/item/info?id=" + id
					});
				}
			},
			gotoBuild(id) {
				if (this.$route.name == "ItemInfo" || this.$route.query.id != id) {
					this.$router.push({
						path: "/build/info?id=" + id
					});
				}
			}
		},
	};
</script>
<template>
	<div class="recipe_container">
		<!-- {{ recipe }} -->
		<div class="recipe_title">
			<h1>{{ recipe.name }}</h1>
			<div class="time">运行时间：{{ recipe.time }}s</div>
		</div>
		<el-divider class="divider"></el-divider>
		<div class="recipe_main">
			<div v-for="item in recipe.ingredients" :key="item.id" @click="gotoItem(item.id)" class="recipe_part">
				<div class="flex-center">
					<my-image type="items" :icon="item.iconUrl" :size="64" />
					<p class="recipe_text">&nbsp;x {{ item.amount}}</p>
				</div>
				<div class="bottom_text">{{ Math.floor(item.amount / recipe.time * 60 * 1000) / 1000 }} item/min</div>
			</div>
			<p v-show="recipe.ingredients.length != 0 && recipe.products.length != 0" class="recipe_text">=></p>
			<div v-for="item in recipe.products" :key="item.id" @click="gotoItem(item.id)" class="recipe_part">
				<div class="flex-center">
					<my-image type="items" :icon="item.iconUrl" :size="64" />
					<p class="recipe_text">&nbsp;x {{ item.amount}}</p>
				</div>
				<div class="bottom_text">{{ Math.floor(item.amount / recipe.time * 60 * 1000) / 1000 }} item/min</div>
			</div>
			<div class="buildings">
				<div v-for="build in recipe.buildings" :key="build.id" @click="gotoBuild(build.id)">
					<my-image type="buildings" :icon="build.iconUrl" :size="64" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import MyImage from "@/components/Image.vue";
	export default {
		name: "simpleRecipeInfo",
		props: ["recipe"],
		components: {
			MyImage,
		},
		methods: {
			Item(url) {
				return this.$img.i_64(url);
			},
			gotoItem(id) {
				if (this.$route.name == "BuildInfo" || this.$route.query.id != id) {
					this.$router.push({
						path: "/item/info?id=" + id
					});
				}
			},
			gotoBuild(id) {
				if (this.$route.name == "ItemInfo" || this.$route.query.id != id) {
					this.$router.push({
						path: "/build/info?id=" + id
					});
				}
			}
		},
	};
</script>
<style lang="less" scoped>
	@import "@/assets/less/variables.less";

	.recipe_container {
		background: @color-white;
		border-radius: 12px;
		padding: 20px;
		margin: 10px 0;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
		transition: transform 0.2s, box-shadow 0.2s;

		&:hover {
			transform: translateY(-2px);
			box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
		}

		.recipe_title {
			padding: 0 8px;
			margin-bottom: 12px;
			display: flex;
			justify-content: space-between;

			h1 {
				font-size: 20px;
				font-weight: 600;
				color: @color-text;
				letter-spacing: 0.5px;
			}

			.time {
				font-size: 20px;
				color: @color-subtext;
				font-family: monospace;
				background: @color-disabled;
				padding: 0px 24px;
				line-height: 50px;
				border-radius: 20px;
			}
		}

		.divider {
			margin: 12px 0;
			background-color: @color-border;
		}

		.recipe_main {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
			align-items: center;
			gap: 20px;
			padding: 0 8px;
			position: relative;

			.recipe_part{
				max-width: 120px;
			}
			
			>div:not(.buildings) {
				cursor: pointer;
				transition: opacity 0.2s;
				min-width: 120px;

				&:hover {
					opacity: 0.8;
				}

				.flex-center {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					position: relative;

					.recipe_text {
						position: absolute;
						top: 0;
						right: 0;
						padding: 2px 8px;
						border-radius: 4px;
					}
				}

				.bottom_text {
					text-align: center;
					margin-top: 8px;
				}
			}

			.buildings {
				grid-column: -1;
				display: flex;
				gap: 12px;
				margin-left: auto;
				padding-left: 20px;

				img {
					transition: transform 0.2s;

					&:hover {
						transform: scale(1.05);
					}
				}
			}

			// 箭头样式
			p[class="recipe_text"] {
				font-size: 24px;
				color: @color-subtext;
				margin: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
			}
		}
	}
</style>